<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 500px;
            height: 270px;
            margin: 50px auto;
            background-color: aquamarine;
            padding: 10px 0;
            /* 开启相对定位  */
            position: relative;
            /* 裁剪 */
            overflow: hidden;
        }
        img{
            width: 480px;
            height: 270px;
        }
        #imgList{
            /* 去除项目符号 */
            list-style: none;
            /* 设置ul 宽度 */
            /* width: 2500px; */
            
            /* 开启绝对定位 */
            position: absolute;
            /* 设置偏移量 */
            left:0px;

        }
        #imgList li{
            /* 设置浮动 */
            float: left;
            /* 设置左右外边距 */
            margin: 0 10px;
        }
        #navDiv{
            /* 开启绝对定位 */
            position: absolute;
            /* 设置位置 */
            bottom: 15px;
            /* 设置left值
                outer宽度 500
                navDiv宽度 25*5 =125
                500-125 =375/2 = 187.5
            */
            /* left: 187px; */
            
        }
        #navDiv a{
            /* 设置超链接浮动 */
            float: left;
            /* 宽高 */
            width: 15px;
            height: 15px;
            /* 背景颜色 */
            background-color: white;
            /* 左右外边距 */
            margin: 0 5px;
            /* 设置透明度 */
            opacity: 0.4;
            /* 兼容ie8 透明 */
            filter: alpha(opacity = 50);
        }
        #navDiv a:hover{
            background-color: black;
            /* 设置透明度 */
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 创建一个div，来作为大的容器 -->
    <div id="outer">
        <ul id="imgList">
            <li><img src="images2/01.jpg"></li>
            <li><img src="images2/02.jpg"></li>
            <li><img src="images2/03.jpg"></li>
            <li><img src="images2/04.jpg"></li>
            <li><img src="images2/05.jpg"></li>
            <li><img src="images2/01.jpg"></li>
        </ul>
        <!-- 创建导航按钮 -->
        <div id="navDiv">
            <a href="javascript"></a>
            <a href="javascript"></a>
            <a href="javascript"></a>
            <a href="javascript"></a>
            <a href="javascript"></a>
            
        </div>
    </div>
</body>
</html>
<script src="js/move.js">

</script>
<script>
    window.onload = function(){
        // 获取id 为 imgList的 ul
        var imgList = document.getElementById("imgList");

        // 获取页面中所有 img标签
        var imgArr = imgList.getElementsByTagName("img");
        imgList.style.width = 500*imgArr.length+"px";

        // 设置导航按钮
        // 获取 navDiv
        var navDiv = document.getElementById("navDiv");
        // 获取 outer
        var outer = document.getElementById("outer");
        // 设置navDiv 的left值 
        navDiv.style.left = (outer.offsetWidth -navDiv.offsetWidth)/2 +"px";

        // 默认显示图片的索引
        var index = 0;
        // 获取所有的 a
        var allA = document.getElementsByTagName("a");
        // 设置默认选中的效果
        allA[index].style.backgroundColor = "black";

        /*
            点击超链接切换到指定的图片
                点击第一个超链接，显示第一个图片
                ....
        */
        for(var i=0;i<allA.length;i++){

            // 为每一个超链接都添加一个num属性
            allA[i].num = i;
            //为超链接绑定单击响应函数
            allA[i].onclick = function(){

                // 关闭自动切换的定时器
                clearInterval(timer);
                // 获取点击超链接的索引,并将其设置为index
                index = this.num;

                //切换图片
                // imgList.style.left = -index*500+"px";

                // 修改正在选中的 a
                setA();

                move(imgList,"left",-500*index,20,function(){
                    // 动画执行完毕，开启自动切换
                    autoChange();
                });
                return false;
            };
        }

        // 自动切换图片
        autoChange();


        // 创建一个方法用来设置选中的 a
        function setA(){

            // 判断当前索引是否是最后一张图片
            if(index >= imgArr.length - 1){
                // 则将index 设置为0
                index = 0;

                // 此时显示的最后一张图片，而最后一张图片和第一张是一模一样
                // 通过CSS将最后一张切换成第一张
                imgList.style.left = 0 + "px";
            } 

            // 遍历所有的a，并将他们的背景颜色设置为白色
            for(var i=0; i<allA.length; i++){
                allA[i].style.backgroundColor="";
            }

            // 将选中的 a 设置为黑色
            allA[index].style.backgroundColor="black";
        };

        // 定义一个自动切换的定时器的标识
        var timer;
        
        // 创建一个函数，用来开启自动切换图片
        function autoChange(){
            // 开启一个定时器，用来定时去切换图片
            timer = setInterval(function(){
                // 索引自增
                index++;

                if(index==imgList.length){
                    index=0;
                }
                
                // 执行动画，切换图片
                move(imgList,"left",-500*index,20,function(){
                    // 修改导航按钮
                    setA();
                });

            },3000);
        }

    }
</script>